<template>
  <virtual-selector
    ref="vSelector"
    :value="value"
    :list="dataSourceF"
    placeholder="报告类型"
    :style="`minWidth: ${width}`"
    :max-tag-count="maxTagCount"
    :mode="mode"
    :tooltip="true"
    :option="{
      itemNameKey:nameKey,
      itemValueKey:valueKey,
      itemPageSize:10,
      itemGap: 0,
    }"

    @changeValueHandler="changeValueHandler"
  />
</template>

<script>
import { mapState, mapActions } from 'vuex';
import virtualSelector from '@/pages/components/virtualSelector';
export default {
  components: {
    virtualSelector
  },
  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    arrType: {
      type: String,
      default: 'dep'
    },
    width: {
      type: String,
      default: '148px'
    },
    mode: {
      type: String,
      default: 'default'
    },
    value: {
      type: String,
      default: ''
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'templateName'
    },
    nameKey: {
      type: String,
      default: 'templateName'
    },
    maxTagCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState('fraMonitoring', [
      'templateNameList'
    ]),
    dataSourceF() {
      let d = this.templateNameList;
      if (this.dataSource.length > 0) {
        d = this.dataSource;
      }
      return d;
    }
  },

  watch: {
    value(nv, ov) {
      this.setValueHandler();
      this.$emit('changeValueHandler', nv);
    }
  },
  mounted() {
    this.getTemplateName();
    this.setValueHandler();
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getTemplateName'
    ]),
    changeValueHandler(nv) {
      this.$emit('changeValueHandler', nv);
      this.$emit('change');
    },
    setValueHandler() {
      if (this.mode !== 'multiple') {
        this.$refs.vSelector.showValue = this.templateNameList?.find(item => item[this.valueKey] === this.value)?.[this.nameKey];
      } else {
        const vA = [];
        this.value.forEach(element => {
          vA.push(this.templateNameList?.find(item => item[this.valueKey] === element)?.[this.nameKey]);
        });
        this.$refs.vSelector.showValue = vA;
      }
    }
  }

};
</script>

<style>

</style>
